<template>
  <div>
    <!--块类统计-->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <h3>公司总人数</h3>
          <div>
            <i class="el-icon-s-shop" style="color: purple"></i>
            <span>{{ userTotal }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>请假总数</h3>
          <div>
            <i class="el-icon-s-flag" style="color: red"></i>
            <span>{{ leaveTotal }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>迟到总数</h3>
          <div>
            <i class="el-icon-star-on" style="color: blue"></i>
            <span>{{ clock1Total }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>早退总数</h3>
          <div>
            <i class="el-icon-user-solid" style="color: green"></i>
            <span>{{ clock2Total }}</span>
          </div>
        </el-card>
      </el-col>

    </el-row>
    <!--acharts统计图-->

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;width: auto;">
      <echarts1 />
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="aa">
          <BarChart />
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12">
        <div class="aa">
          <echarts2 />
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import { listLeave } from "@/api/front/statistics";
import { listUser } from "@/api/front/statistics";
import { listClock } from "@/api/front/statistics";
import echarts1 from './ECharts/echarts1'
import echarts2 from './ECharts/echarts2'
import BarChart from './dashboard/BarChart'

export default {
  name: 'index',
  components: {
    echarts1,
    echarts2,
    BarChart
  },
  data() {
    return {
      clock1Total: 0,
      clock2Total: 0,
      // 请假总条数
      leaveTotal: 0,
      // 用户总条数
      userTotal: 0,
      // 日期范围
      dateRange: [],
      // 查询请假参数
      queryLeaveParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        userNick: null,
        startTime: null,
        endTime: null,
        leaveType: null,
        leaveReason: null,
        leaveStatus: null,
        returnReason: null
      },
      // 查询用户参数
      queryUserParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      // 查询迟到参数
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        userNick: null,
        clockTime: null,
        clockStatus: 3
      },
      // 查询早退参数
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        userNick: null,
        clockTime: null,
        clockStatus: 4
      },
    };
  },
  created() {
    this.getLeaveList();
    this.getUserList();
    this.getClock1List();
    this.getClock2List();
  },
  methods: {
    /** 查询迟到总数 */
    getClock1List() {
      listClock(this.queryParams1).then(response => {
        this.clock1Total = response.total;
      });
    },
    /** 查询早退总数 */
    getClock2List() {
      listClock(this.queryParams2).then(response => {
        this.clock2Total = response.total;
      });
    },
    /** 查询用户总数 */
    getUserList() {
      listUser(this.addDateRange(this.queryUserParams, this.dateRange)).then(response => {
        this.userTotal = response.total;
      }
      );
    },
    /** 查询请假总数 */
    getLeaveList() {
      listLeave(this.queryLeaveParams).then(response => {
        this.leaveTotal = response.total;
      });
    }
  }
}



</script>

<style scoped>
.el-card {
  margin-bottom: 20px;
  text-align: center;
}

.aa {
  padding-left: 150px;
}
</style>